<template>
	<div>
		<!-- vant 输入框 -->
		<van-search v-model.trim="value" placeholder="请输入搜索关键词" 
		shape="round"
		@clear="clearFn"
		@keyup="key"
		/>
		<!-- 搜索下容器 -->
		<div class="search_wrap" v-if="this.value.length === 0">
			<!-- 标题 -->
			<p class="hot_title">热门搜索</p>
			<!-- 热搜关键词容器 -->
			<div class="hot_name_wrap">
				<!-- 每个搜索关键词 -->
				<span class="hot_item"
				v-for="(item, index) in hotArr" :key="index"
				@click="clickFn(item.first)"
				>
					{{ item.first }}
				</span>
			</div>
		</div>

		<div class="search_wrap" v-else>

			<p class="hot_title">最佳匹配</p>

				<van-list
					v-model="loading"
					:finished="finished"
					finished-text="没有更多了"
					@load="onLoad"
					:immediate-check="false"
				>
						<!-- <van-cell :title="item.name" 
											:label="item.ar[0].name + ' - ' + item.name" 
											v-for="item in resArr" :key="item.id">
								<template #right-icon>
											<van-icon name="play-circle-o" size="0.6rem" />
								</template>
						</van-cell> -->

						<SongItem	v-for="item in resArr" :key="item.id"
									:title="item.name"
									:label="item.ar[0].name"
									:id="item.id">
						</SongItem>

				</van-list>

				

			</div>

	</div>
</template>
<script>
import { hotSearchList, getSearchList } from '@/api'
import SongItem from '@/components/SongItem.vue'

	export default {
		components: {
			SongItem
		},
		data () {
			return {
				value: '' ,	//搜索框内容
				hotArr: [],	//存放热门搜索词
				resArr: [],  //搜索结果
				loading: false,  //是否正在加载更多数据
        finished: false,	//是否全部数据加载完成
				page: 1 	//页码
			}
		},
		//请求热门搜索
		async created () {
			const {data: {result: res}} = await hotSearchList()
			console.log(res.hots);
			this.hotArr = res.hots
		},
		
		methods:{
			
			
			//点击搜索词赋值给搜索框
			async clickFn(name){
					this.value = name
					const {data: res} = await getSearchList({
						keywords: this.value
					})
					this.resArr = res.result.songs
			},

			//点击叉号清除搜索关键词
			clearFn(){
				//并清空对应内容数组
				this.resArr = []
				//页码回到第一页
				this.page = 1
			},
			
			//列表滚动到底部会触发onLoad事件
			async onLoad(){
				console.log('触发onLoad事件');
				this.page++
				const res = await this.getResFn()

				if(res.result.songs === undefined){
				this.finished = true
				this.loading = false;
				return
			}
				this.resArr = [...this.resArr, ...res.result.songs]
				this.loading = false;
			},
			
			//输入内容搜索匹配
			async	key(){
				if(this.value.length === 0) return

				this.page = 1
				this.finished = false

				const {data: res} = await getSearchList({
						keywords: this.value
					})
				console.log(res);
				if(res.result.songs === undefined) {
					this.resArr = []
					return
				}
				this.resArr = res.result.songs
			},

			//热搜关键词对应数据，多处调用，此处封装
			async getResFn(){
				const {data: res} =  await getSearchList({
						//热搜关键词
						keywords: this.value,
						limit: 50,
						offset: (this.page - 1) * 50,
					})
					
					return res;
			},
			
		}
	}
</script>

<style scoped>
	/* 搜索容器的样式 */
	.search_wrap {
		padding: 0.266667rem;
	}

	/*热门搜索文字标题样式 */
	.hot_title {
		font-size: 0.32rem;
		color: #666;
	}

	/* 热搜词_容器 */
	.hot_name_wrap {
		margin: 0.266667rem 0;
	}

	/* 热搜词_样式 */
	.hot_item {
		display: inline-block;
		height: 0.853333rem;
		margin-right: 0.213333rem;
		margin-bottom: 0.213333rem;
		padding: 0 0.373333rem;
		font-size: 0.373333rem;
		line-height: 0.853333rem;
		color: #333;
		border-color: #d3d4da;
		border-radius: 0.853333rem;
		border: 1px solid #d3d4da;
	}
</style>
